<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="user-scalable=no,width=device-width" />
		<title>Kilo</title>
		<link type="text/css" rel="stylesheet" media="screen" href="lib/jqtouch/jqtouch.css" />
		<link type="text/css" rel="stylesheet" media="screen" href="lib/themes/default/theme.css" />
		<script type="text/javascript" src="lib/jqtouch/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="lib/jqtouch/jqtouch.js"></script>
		<script type="text/javascript" src="js/kilo.js"></script>
	</head>
	<body id="jqt">
		<div id="home">
			<div class="toolbar">
				<h1>Kilo</h1>
				<a href="#settings" class="button flip">Settings</a>
			</div>
			<ul class="edgetoedge">
				<li class="arrow"><a href="#dates">Dates</a></li>
				<li class="arrow"><a href="#about">About</a></li>
			</ul>
		</div>
		<div id="about">
			<div class="toolbar">
				<h1>About</h1>
				<a class="button back" href="#">Back</a>
			</div>
			<p>Kilo gives you easy access to your food diary.</p>
		</div>
		<div id="dates">
			<div class="toolbar">
				<h1>Dates</h1>
				<a class="button back" href="#">Back</a>
			</div>
			<ul class="edgetoedge">
				<li class="arrow"><a id="0" href="#date">Today</a></li>
				<li class="arrow"><a id="1" href="#date">Yesterday</a></li>
				<li class="arrow"><a id="2" href="#date">2 Days Ago</a></li>
				<li class="arrow"><a id="3" href="#date">3 Days Ago</a></li>
				<li class="arrow"><a id="4" href="#date">4 Days Ago</a></li>
				<li class="arrow"><a id="5" href="#date">5 Days Ago</a></li>
			</ul>
		</div>
		<div id="date">
			<div class="toolbar">
				<h1>Date</h1>
				<a class="button back" href="#">Back</a>
				<a class="button" href="#createEntry">+</a>
			</div>
			<ul class="edgetoedge">
				<li id="entryTemplate" class="entry" style="display:none;">
					<span class="label">Label</span>
					<span class="calories">Label</span>
					<span class="delete">Label</span>
				</li>
			</ul>
		</div>
		<div id="createEntry">
			<div class="toolbar">
				<h1>New Entry</h1>
				<a href="button back" href="#">Cancel</a>
			</div>
			<form method="post">
				<ul class="rounded">
					<li><input type="text" placeholder="food" name="food" id="food" autocomplete="off" autocapitalize="off" autocorrect="off" /></li>
					<li><input type="text" placeholder="calories" name="calories" id="calories" autocomplete="off" autocapitalize="off" autocorrect="off" /></li>
					<li><input type="submit" class="submit" name="action" value="Save Entry" /></li>
				</ul>
			</form>
		</div>
		<div id="settings">
			<div class="toolbar">
				<h1>Settings</h1>
				<a href="#" class="button cancel">Cancel</a>
			</div>
			<form method="post">
				<ul class="rounded">
					<li><input type="text" name="age" id="age" placeholder="Age" /></li>
					<li><input type="text" name="weight" id="weight" placeholder="Weight" /></li>
					<li><input type="text" name="budget" id="budget" placeholder="Budget" /></li>
					<li><input type="submit" class="submit" name="action" value="Save change" /></li>
				</ul>
			</form>
		</div>
	</body>
</html>